<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import UserInfoCard from '@/components/member/UserInfoCard.vue'
import SideMenu from '@/components/member/SideMenu.vue'
import ProfileForm from '@/components/member/ProfileForm.vue'
import OrderList from '@/components/member/OrderList.vue'
import FavoriteList from '@/components/member/FavoriteList.vue'
import AccountSettings from '@/components/member/AccountSettings.vue'
import NotificationList from '@/components/member/NotificationList.vue'

const userStore = useUserStore()

/** 当前选中的菜单项 */
const activeMenuKey = ref<string>('profile')

/** 是否已登录 */
const isLoggedIn = computed(() => userStore.isLoggedIn)

/** 菜单切换处理 */
const handleMenuChange = (key: string) => {
  activeMenuKey.value = key
}
</script>

<template>
  <div class="member-center-page">
    <!-- 已登录:显示会员中心内容 -->
    <template v-if="isLoggedIn">
      <!-- 顶部用户信息卡片 -->
      <UserInfoCard />

      <!-- 主内容区域 -->
      <div class="content-layout">
        <!-- 侧边菜单 -->
        <aside class="sidebar">
          <SideMenu :active-key="activeMenuKey" @change="handleMenuChange" />
        </aside>

        <!-- 内容面板 -->
        <main class="main-content">
          <Transition name="fade" mode="out-in">
            <ProfileForm v-if="activeMenuKey === 'profile'" key="profile" />
            <OrderList v-else-if="activeMenuKey === 'orders'" key="orders" />
            <FavoriteList v-else-if="activeMenuKey === 'favorites'" key="favorites" />
            <AccountSettings v-else-if="activeMenuKey === 'settings'" key="settings" />
            <NotificationList v-else-if="activeMenuKey === 'notifications'" key="notifications" />
          </Transition>
        </main>
      </div>
    </template>

    <!-- 未登录:显示空状态提示 -->
    <template v-else>
      <div class="empty-state">
        <div class="empty-icon">🔒</div>
        <h2 class="empty-title">请先登录</h2>
        <p class="empty-description">登录后即可访问会员中心,查看个人信息和订单</p>
        <div class="empty-hint">
          <el-text type="info">
            💡 提示:请点击顶部导航栏的"登录 / 注册"按钮进行登录
          </el-text>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.member-center-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  min-height: calc(100vh - 75px);
}

.content-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 95px;
}

.main-content {
  min-height: 400px;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  padding: 60px 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.1);
  text-align: center;
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.empty-title {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 16px 0;
}

.empty-description {
  font-size: 16px;
  color: #6c757d;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.empty-hint {
  padding: 16px 24px;
  background: linear-gradient(135deg, #e8f5fe 0%, #f0f9ff 100%);
  border-radius: 12px;
  border-left: 3px solid #4facfe;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .member-center-page {
    padding: 20px 16px;
  }

  .content-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sidebar {
    position: static;
  }

  .empty-state {
    min-height: 400px;
    padding: 40px 24px;
  }

  .empty-icon {
    font-size: 60px;
  }

  .empty-title {
    font-size: 24px;
  }

  .empty-description {
    font-size: 14px;
  }
}
</style>
